<template>
  <div id="bg">
    <div class="viewport">
      <div class="column">
        <!-- 概览区域模块制作 -->
        <div class="panel overview">
          <el-date-picker
            v-model="value1"
            style="background-color:#000; position: absolute; top: -0.3rem; left:-0.9rem"
            type="monthrange"
            range-separator="至"
            start-placeholder="开始月份"
            end-placeholder="结束月份"
            value-format="yyyy-MM"
            @change="change"
          />
          <!-- <ul>
              <li>
                <span>
                  <i class="icon-dot" style="color: #006cff" />
                  设备总数
                </span>
              </li>
              <li class="item">
                <h4>190</h4>
                <span>
                  <i class="icon-dot" style="color: #6acca3" />
                  季度新增
                </span>
              </li>
              <li>
                <h4>3,001</h4>
                <span>
                  <i class="icon-dot" style="color: #6acca3" />
                  运营设备
                </span>
              </li>
              <li>
                <h4>108</h4>
                <span>
                  <i class="icon-dot" style="color: #ed3f35" />
                  异常设备
                </span>
              </li>
            </ul> -->
        </div>
        <!-- 监控区域模块制作 -->
        <div class="panel monitor">
          <div class="inner">
            <div class="tabs">
              <a href="javascript:;" class="active">案列警示</a>
              <!-- <a href="javascript:;">异常设备监控</a> -->
            </div>
            <div class="content" style="display: block;">
              <div class="head">
                <span class="col">案发时间</span>
                <span class="col">诈骗类别</span>
                <span class="col">详情</span>
              </div>
              <div class="marquee-view">
                <div v-for="(item, index) in detailsTheCase" :key="index" class="marquee">
                  <div class="row">
                    <span class="col">{{ item.time +'年' }}</span>
                    <span class="col">{{ item.address }}</span>
                    <span id="detail" class="col">{{ item.detail }}</span>
                    <span class="icon-dot" />
                  </div>
                </div>
              </div>
            </div>
            <!-- <div class="content">
              <div class="head">
                <span class="col">异常时间</span>
                <span class="col">设备地址</span>
                <span class="col">异常代码</span>
              </div>
              <div class="marquee-view">
                <div class="marquee">
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000001</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190701</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190703</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190704</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190705</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190706</span>charage
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190707</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190708</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190709</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                  <div class="row">
                    <span class="col">20190710</span>
                    <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                    <span class="col">1000002</span>
                    <span class="icon-dot" />
                  </div>
                </div>
              </div>
            </div> -->
          </div>
        </div>
        <!-- 点位分布统计模块制作 -->
        <div class="point panel">
          <div class="inner">
            <h3>十大诈骗类型性别占比</h3>
            <div id="sex" class="chart" />
          </div>
        </div>
      </div>
      <div class="column">
        <!-- 地图模块 -->
        <div class="map">
          <h3 style=" text-align: center; font-size:0.5em; color:#20a6a1">
            <span class="icon-cube" />
            反诈骗应用系统监控大屏
          </h3>
          <div id="geo" class="chart" />
        </div>
        <!-- 用户统计模块 -->
        <div class="users panel">
          <div class="inner">
            <h3>十大诈骗类型年龄占比</h3>
            <div id="age" class="chart" />
          </div>
        </div>
      </div>
      <div class="column">
        <div class="sales panel">
          <div class="inner">
            <h3>十大诈骗类型数量占比</h3>
            <div id="amount" class="chart" />
          </div>
        </div>
        <!-- 全国热榜模块制作 -->
        <div class="top panel">
          <div class="inner">
            <h3>十大诈骗类型金额占比</h3>
            <div id="type" class="chart" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
import 'echarts/map/js/china.js'
import { getAlarmAll } from '@/api/alarm'

export default {
  data() {
    return {
      result: {},
      date: {
        start: '2021-01',
        end: '2022-12'
      },
      value1: [],
      fraudType: ['贷款, 代办信用卡类', '刷单返利类', '冒充电商物流客服类', '虚拟购物，服务类', '杀猪盘类', '冒充公检法及政府机关类', '冒充领导，熟人类', '网络游戏产品虚假交易类', '网络婚恋，交友类（非杀猪盘）', '虚拟征信类'],
      detailsTheCase: [
        {
          time: '2021',
          address: '浙江金华市特大杀猪盘案件',
          detail: '犯罪分子通过交友或以某某证券公司名义，以互联网、电话、短信等方式散布虚假个股内幕信息及走势，寻找受害人并获取信任，然后引诱受害人前往自己搭建的虚假平台进行投资、赌博，最终骗取钱财。'
        },
        {
          time: '2021',
          address: '杭州“2·28”冒充公检法电信诈骗案',
          detail: '2021年2月，杭州发生一起冒充公检法电信诈骗案件，被骗1000余万元。公安机关经过缜密侦查，共打掉洗钱跑分、贩卖“两卡”等犯罪团伙5个，抓获犯罪嫌疑人32名。'
        },
        {
          time: '2019',
          address: '贷款诈骗',
          detail: '2019年7月，家住南宁市的洪先生被骗4千余元。洪先生接到一个陌生电话，电话接通之后对方自称是某某平台分期的工作人员，并问洪先生需不需要贷款，洪先生说需要，于是对方就让他加好友，按提示转给对方一共4千余元人民币。等到询问贷款进度时联系不到对方，才发现自己被骗。'
        },
        {
          time: '2020',
          address: '“兼职刷单”诈骗',
          detail: '2020年9月，某高校学生被以“兼职刷单”为由诈骗1万余元。受害人在某聊天软件上收到兼职刷单的信息，并且加入对方邀请的好友群中，通过“导师”指导刷单，对方要求受害人完成10单任务，才能返利。不断引诱受害人持续进行刷单支付。完成后，发送虚假转账截图，受害人等到第二天并未收到钱款，才意识到自己被骗。'
        },
        {
          time: '2021',
          address: '“冒充熟人”诈骗',
          detail: '2021年1月，李先生被骗人民币2千余元。某日，李先生在聊天软件上的好友账号被盗，该账号向李先生发来消息称需要借款2千余元，且该账号发来经过改动的某银行到账截图，李先生随后使用扫描二维码方式转账给对方，事后得知被骗。'
        },
        {
          time: '2021',
          address: '“冒充购物客服退款”诈骗',
          detail: '近日，孙女士接到自称客服打来的电话，称之前在网上购买的小孩衣服质量有问题，并承诺为孙女士退款。孙女士听到对方能完整说出自己的订单信息就对其深信不疑，将对方添加为好友后，对方立刻给孙女士发来了“退款”链接，退款心切的孙女士按照要求如实填写了个人信息和自己收到的手机验证码，认为很快能拿到退款的孙女士没有等到退款，等到的却是骗子先后四次转走她银行卡中1千余元的扣款短信，孙女士这才发现自己被骗了。'
        },
        {
          time: '2021',
          address: '“社保卡更新”诈骗',
          detail: '近日，市民小黄称接到了“社保局”发过来的短信，提示社保卡账户已升级，需要办理重新激活才能正常使用，短信内附带了一个激活链接。小黄点开链接后，按照页面提示，填写姓名、身份证号、银行账号、手机号、银行卡密码，但没等到新的电子社保卡，却等来了银行卡被扣款的短信通知。小黄这时才发现被骗并报警。'
        }, {
          time: '2017',
          address: '冒充熟人诈骗',
          detail: '2017年6月6日11时21分，民权县城关镇居民程某某报警称：当日9时20分，有人通过冒充其熟人向其借钱的方式实施诈骗。110指挥中心民警接到报警后立即将案件转至市反虚假信息诈骗中心。经市反诈中心民警连续工作，顺线追踪，紧急止付、冻结了转付到犯罪嫌疑人账户内的80000元，成功为受害人挽回了经济损失。'
        },
        {
          time: '2017',
          address: '参与网络赌博',
          detail: '2017年6月12日10时28分，梁园区居民郭某某报警称：有人通过微信圈内发红包方式吸引其参与，然后让其参与网络博彩活动，骗其通过支付宝向嫌疑人银行卡存入58000元。接到受害人的报警后，市公安局110指挥中心立即将案件转至市反虚假信息诈骗中心。反诈中心民警立即启动工作预案，深度研判，紧急止付并冻结了嫌疑人账户内涉案资金共计457259.09元。'
        },
        {
          time: '2022',
          address: '冒充“公检法”威逼利诱式：',
          detail: '自称公安局民警，告知受害人由于其身份信息泄露或曾经身份证遗失过，涉嫌一起诈骗案，需要配合警方办案。'
        },
        {
          time: '2020',
          address: '微信冒充“谈恋爱”实施诈骗',
          detail: '2020年6月，被告人尹某作为介绍人介绍周某和杨某认识，见面后周某对杨某颇有好感，便请托被告人尹某帮忙撮合，并许诺事成之后支付介绍费给被告人尹某。后尹某使用自己身份证办理新手机卡，并用该手机卡注册昵称“小姐姐”的微信，用该微信冒充杨某的身份与周某联系，并编造各种理由向周某要钱，共骗取周某56000余元。'
        },
        {
          time: '2021',
          address: '虚构刷单返现活动实施诈骗',
          detail: '2021年2月至4月初，被告人刘某、孙某明知他人利用信息网络实施犯罪，为获利以代发微信红包的方式为他人实施电信诈骗犯罪提供支付结算等帮助，即代发红包作为被害人进行所谓刷单、关注店铺等任务的返利，后相关人员实施诈骗。其中，被告人孙某提供支付结算金额共计人民币19000余元，获利1500元。被告人刘某提供支付结算金额共计290000余元，获利15000余元。'
        },
        {
          time: '2018',
          address: '利用虚假网贷平台实施诈骗',
          detail: '2018年以来，被告人刘某在互联网发布可以提供贷款服务的虚假信息，谎称可以为他人发放贷款，对贷款申请人进行诈骗。刘某在要求被害人提供个人信息资料后，又以需要贷款手续费或证明贷款人具有还款能力和设置后期还款余额为由，诱骗被害人向其转账，骗取被害人李某、吴某人民币合计4769元。其中，李某发现被骗后，在家中服毒身亡。'
        }
      ]
    }
  },

  mounted () {
    this.query()
    this.pieChart()
  },
  methods: {
    async query() {
      const result = await getAlarmAll(this.date)
      const _result = result.data.list
      const crimeCity = []
      for (let i = 0; i < _result.length; i++) {
        crimeCity.push(_result[i].crimeCity)
      }
      const _crimeCity = this.dataProcess(crimeCity)
      this.map(_crimeCity)
      const informantAge = this.classify(_result, 'informantAge')
      const informantGender = this.classify(_result, 'informantGender')
      // console.log(informantGender)
      this.ageDistribution(informantAge)
      this.genderDistribution(informantGender)
      this.typeDistribution()
    },
    change() {
      this.date.start = this.value1[0]
      this.date.end = this.value1[1]
      this.query()
    },
    // 去重
    dataProcess(list) {
      const result = list.reduce((pre, cur) => {
        if (cur in pre) {
          pre[cur]++
        } else {
          pre[cur] = 1
        }
        return pre
      }, {})
      return result
    },
    // 按年龄和诈骗类型分类
    classify(list, type) {
      const informantarr = {
        2: {},
        3: {},
        4: {},
        5: {},
        6: {},
        7: {},
        8: {},
        9: {},
        10: {},
        11: {}
      }
      for (let i = 0; i < list.length; i++) {
        switch (list[i].alarmCategory) {
          case 2: if (list[i][type] in informantarr[2]) {
            informantarr[2][list[i][type]]++
          } else {
            informantarr[2][list[i][type]] = 1
          }
            break
          case 3: if (list[i][type] in informantarr[3]) {
            informantarr[3][list[i][type]]++
          } else {
            informantarr[3][list[i][type]] = 1
          }
            break
          case 4: if (list[i][type] in informantarr[4]) {
            informantarr[4][list[i][type]]++
          } else {
            informantarr[4][list[i][type]] = 1
          }
            break
          case 5: if (list[i][type] in informantarr[5]) {
            informantarr[5][list[i][type]]++
          } else {
            informantarr[5][list[i][type]] = 1
          }
            break
          case 6: if (list[i][type] in informantarr[6]) {
            informantarr[6][list[i][type]]++
          } else {
            informantarr[6][list[i][type]] = 1
          }
            break
          case 7:if (list[i][type] in informantarr[7]) {
            informantarr[7][list[i][type]]++
          } else {
            informantarr[7][list[i][type]] = 1
          }
            break
          case 8: if (list[i][type] in informantarr[8]) {
            informantarr[8][list[i][type]]++
          } else {
            informantarr[8][list[i][type]] = 1
          }
            break
          case 9: if (list[i][type] in informantarr[9]) {
            informantarr[9][list[i][type]]++
          } else {
            informantarr[9][list[i][type]] = 1
          }
            break
          case 10:if (list[i][type] in informantarr[10]) {
            informantarr[10][list[i][type]]++
          } else {
            informantarr[10][list[i][type]] = 1
          }
            break
          case 11: if (list[i][type] in informantarr[11]) {
            informantarr[11][list[i][type]]++
          } else {
            informantarr[11][list[i][type]] = 1
          }
            break
        }
      }
      return informantarr
    },
    // 地图数据处理并绘图
    map(obj) {
      const mapData = []
      // const mapobj = { name: '', value: '' }
      for (const key in obj) {
        // console.log(key)
        // mapobj.name = key
        // mapobj.value = obj[key]
        mapData.push({
          name: key,
          value: obj[key] * 100
        })
      }
      this.chinachart = echarts.init(document.getElementById('geo'))
      this.chartOption = {
        tooltip: { // 鼠标移到图里面的浮动提示框
        // formatter详细配置： https://echarts.baidu.com/option.html#tooltip.formatter
          formatter (params, ticket, callback) {
            // params.data 就是series配置项中的data数据遍历
            let localValue = 0
            if (params.data) {
              localValue = params.data.value
            } else { // 为了防止没有定义数据的时候报错写的
              localValue = 0
            }
            const htmlStr = `
          <div style='font-size:18px;'> ${params.name}</div>
          <p style='text-align:left;margin-top:10px;font-size:10px;'>
	          诈骗案件:${localValue}<br/>
          </p>
        `
            return htmlStr
          }
          // backgroundColor:"#ff7f50",//提示标签背景颜色
          // textStyle:{color:"#fff"} //提示标签字体颜色
        },
        // visualMap的详细配置解析：https://echarts.baidu.com/option.html#visualMap
        visualMap: { // 左下角的颜色区域
          type: 'piecewise', // 定义为分段型 visualMap
          min: 0,
          max: 100,
          text: [1000, 1],
          itemWidth: 20,
          textStyle: { color: '#fff' },
          pieces: [ // 自定义『分段式视觉映射组件（visualMapPiecewise）』的每一段的范围，以及每一段的文字，以及每一段的特别的样式
            { gt: 900, lte: 1000, label: '900-1000起', color: 'orangered' }, // (900, 1000]
            { gt: 500, lte: 900, label: '正常', color: '#ff9800' }, // (500, 900]
            { gt: 310, lte: 500, label: '警告', color: '#ffeb3b' }, // (310, 500]
            { gt: 200, lte: 300, label: '较差', color: '#9adcfa' }, // (200, 300]
            { gt: 10, lte: 200, label: '非常差', color: '#6ad86e' } // (10, 200]
          // { value: 0, label: '无数据', color: '#999' } // [0]
          ]
        },
        // geo配置详解： https://echarts.baidu.com/option.html#geo
        geo: { // 地理坐标系组件用于地图的绘制
          map: 'china', // 表示中国地图
          // roam: true, // 是否开启鼠标缩放和平移漫游
          roam: true,
          zoom: 1.2, // 当前视角的缩放比例（地图的放大比例）
          label: {
            show: true
          },
          itemStyle: {
            normal: {
              areaColor: '#142957',
              borderColor: '#195BB9',
              borderWidth: 1
            },
            emphasis: {
              areaColor: '#2B91B7'
            }
          }
        },
        series: [
          {
            name: '', // 浮动框的标题（上面的formatter自定义了提示框数据，所以这里可不写）
            type: 'map',
            geoIndex: 0,
            label: {
              show: true
            },
            // 这是需要配置地图上的某个地区的数据，根据后台的返回的数据进行拼接
            data: []
          }
        ]
      }
      this.chartOption.series[0].data = mapData
      // 使用刚指定的配置项和数据显示地图数据
      this.chinachart.setOption(this.chartOption)
    },
    ageDistribution(list) {
      this.ageCharts = echarts.init(document.getElementById('age'))
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          top: '4%',
          left: '1%',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '1%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          position: 'right',
          offset: 28,
          data: this.fraudType,
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '20岁以下',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              labelLayout: {
                hideOverlap: false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '21-30',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '31-40',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '41-50',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '50岁以上',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      }
      const num = [19, 25, 11, 5, 19, 5, 5, 5, 7, 5]
      let j = 0
      for (const key in list) {
        this.option.series[0].data.push((list[key][1] / num[j]).toFixed(2))
        this.option.series[1].data.push((list[key][2] / num[j]).toFixed(2))
        this.option.series[2].data.push((list[key][3] / num[j]).toFixed(2))
        this.option.series[3].data.push((list[key][4] / num[j]).toFixed(2))
        this.option.series[4].data.push((list[key][5] / num[j]).toFixed(2))
        j++
      }
      this.ageCharts.setOption(this.option)
    },
    genderDistribution(list) {
      this.sexCharts = echarts.init(document.getElementById('sex'))
      this.option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            // Use axis to trigger tooltip
            type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
          }
        },
        legend: {
          top: '4%',
          left: '1%',
          textStyle: {
            color: '#fff'
          }
        },
        grid: {
          left: '1%',
          right: '0%',
          bottom: '0%',
          containLabel: true
        },
        xAxis: {
          show: false
        },
        yAxis: {
          type: 'category',
          position: 'right',
          offset: 28,
          data: this.fraudType,
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            name: '男',
            type: 'bar',
            stack: 'total',
            label: {
              show: true,
              labelLayout: {
                hideOverlap: false
              }
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          },
          {
            name: '女',
            type: 'bar',
            stack: 'total',
            label: {
              show: true
            },
            emphasis: {
              focus: 'series'
            },
            data: []
          }
        ]
      }
      const num = [19, 25, 11, 5, 19, 5, 5, 5, 7, 5]
      let j = 0
      for (const key in list) {
        this.option.series[0].data.push((list[key][0] / num[j]).toFixed(2))
        this.option.series[1].data.push((list[key][1] / num[j]).toFixed(2))
        j++
      }
      this.sexCharts.setOption(this.option)
    },
    typeDistribution() {
      this.typeChart = echarts.init(document.getElementById('type'))
      this.option = {
        xAxis: {
          type: 'category',
          data: this.fraudType,
          axisLabel: {
            color: '#fff',
            rotate: 60
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            color: '#fff'
          }
        },
        series: [
          {
            data: [4.12, 5.91, 4.53, 3.33, 17.07, 10.76, 13.16, 1.69, 9.41, 9.16],
            type: 'bar'
          }
        ]
      }

      this.typeChart.setOption(this.option)
    },
    pieChart() {
      const arr = []
      const arrData = [18.1, 25.4, 11.5, 3.9, 18.9, 4.8, 4.0, 2.9, 1.4, 3.1]
      this.amountChart = echarts.init(document.getElementById('amount'))
      for (let i = 0; i < this.fraudType.length; i++) {
        arr.push({
          value: arrData[i],
          name: this.fraudType[i]
        })
      }
      this.option = {
        // title: {
        //   text: '涉案金额分析',
        //   left: 'center'
        // },
        tooltip: {
          trigger: 'item'
        },
        // legend: {
        //   orient: 'vertical',
        //   left: 'left'
        // },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '70%',
            data: arr,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }

      this.amountChart.setOption(this.option)
    }
  }
}
</script>

<style scoped>
/*清除元素默认的内外边距  */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
/*让所有斜体 不倾斜*/
em,
i {
  font-style: normal;
}
/*去掉列表前面的小点*/
li {
  list-style: none;
}
/*图片没有边框   去掉图片底侧的空白缝隙*/
img {
  border: 0; /*ie6*/
  vertical-align: middle;
}
/*让button 按钮 变成小手*/
button {
  cursor: pointer;
}
/*取消链接的下划线*/
a {
  color: #666;
  text-decoration: none;
}

a:hover {
  color: #e33333;
}
h4 {
  font-weight: 400;
}
/* // 实现rem适配 */
/* @media screen and (max-width: 1024px) {
  html {
    font-size: 42.66px !important;
  }
}

@media screen and (min-width: 1920px) {
  html {
    font-size: 80px !important;
  }
} */
#bg{
   background: url(../../../assets/bg.jpg) no-repeat 0 0 / cover;
   padding-top: 0.4rem;
}
.viewport {
  display: flex;
  min-width: 1024px;
  max-width: 1920px;
  margin: 0 auto;
  padding: 0rem 0.25rem ;
 /* background: url(../../../assets/logo.png) no-repeat 0 0 / contain; */
  min-height: 780px;
}
.viewport .column {
  flex: 3;
}
.viewport .column:nth-child(2) {
  flex: 4;
  margin: 0.4rem 0.25rem 0;
}
/* 公共面板样式  */
.panel {
  position: relative;
  border: 15px solid transparent;
  border-width: 0.6375rem 0.475rem 0.25rem 1.65rem;
  border-image-source: url(../../../assets//border.png);
  border-image-slice: 51 38 20 132;
  margin-bottom: 0.25rem;
}
.inner {
  position: absolute;
  top: -0.6375rem;
  left: -1.65rem;
  right: -0.475rem;
  bottom: -0.25rem;
  padding: 0.1rem 0.25rem;
}
.panel h3 {
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}
/* 概览区域模块制作 */
.overview {
  height: 1.375rem;
  position: relative;
}
.el-date-editor .el-range-input{
  background-color: #000 !important;
  line-height: 2rem;
}
/* .overview ul {
  display: flex;
  justify-content: space-between;
}
.overview ul li {
line-height: 0.2rem;
}
.overview ul li h4 {
  font-size: 0.35rem;
  color: #fff;
  margin: 0 0 0.1rem 0.06rem;
}
.overview ul li span {
  font-size: 0.2rem;
  color: #4c9bfd;
} */
/* 监控区域模块制作 */
.monitor {
  height: 6rem;
}
.monitor .inner {
  padding: 0.3rem 0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs {
  padding: 0 0.45rem;
  margin-bottom: 0.225rem;
  display: flex;
}
.monitor .tabs a {
  color: #1950c4;
  font-size: 0.225rem;
  padding: 0 0.3375rem;
}
.monitor .tabs a:first-child {
  padding-left: 0;
  border-right: 0.025rem solid #00f2f1;
}
.monitor .tabs a.active {
  color: #fff;
}
.monitor .content {
  flex: 1;
  position: relative;
  display: none;
}
.monitor .head {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 0.15rem 0.45rem;
  color: #68d8fe;
  font-size: 0.175rem;
}
.monitor .marquee-view {
  position: absolute;
  top: 0.5rem;
  bottom: 0;
  width: 100%;
  overflow: hidden;
}

.monitor .row {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 0.15rem;
  color: #61a8ff;
  padding: 0.15rem 0.45rem;
}
.monitor .row .icon-dot {
  position: absolute;
  left: 0.2rem;
  opacity: 0;
}
.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot {
  opacity: 1;
}
.monitor .col:first-child {
  width: 1rem;
}
.monitor .col:nth-child(2) {
  width: 2.5rem;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.monitor .col:nth-child(3) {
  width: 1rem;
}
/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 10s linear infinite;
}
.marquee-view #detail{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-50%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}
/* 点位分布统计模块制作 */
.point {
  height: 4.6rem;
}
.point .chart {
  display: flex;
  margin-top: 0.1rem;
  justify-content: space-between;
  height: 4rem;
}
/* .point .pie {
  width: 3.9rem;
  height: 3rem;
  margin-left: -0.125rem;
}
.point .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.1rem;
  padding: 0.45rem 0.375rem;
  box-sizing: border-box;
  background-image: url(../../../assets/rect.png);
  background-size: cover;
}
.point h4 {
  margin-bottom: 0.15rem;
  font-size: 0.35rem;
  color: #fff;
}
.point span {
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
} */
/* 地图模块制作 */
.map {
  height: 7.225rem;
  margin-bottom: 0.25rem;
  display: flex;
  flex-direction: column;
}
.map h3 {
  line-height: 1;
  padding: 0.2rem 0;
  margin: 0;
  font-size: 0.25rem;
  color: #fff;
  font-weight: 400;
}
.map .icon-cube {
  color: #68d8fe;
}
.map .chart {
  flex: 1;
  background-color: rgba(255, 255, 255, 0.05);
}
.map .geo {
  width: 100%;
  height: 100%;
}
/* 用户统计模块 */
.users {
  height: 4.6rem;
  display: flex;
}
.users .chart {
  display: flex;
  margin-top: 0.1rem;
  height: 4rem;
}
/* .users .bar {
  width: 7.35rem;
} */
/* .users .data {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 2.1rem;
  padding: 0.45rem 0.375rem;
  box-sizing: border-box;
  background-image: url(../../../assets/rect.png);
  background-size: cover;
} */
.users h4 {
  margin-bottom: 0.15rem;
  font-size: 0.35rem;
  color: #fff;
}
.users span {
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
}
/* 订单模块制作 */
.order {
  height: 1.875rem;
}
.order .filter {
  display: flex;
}
.order .filter a {
  display: block;
  height: 0.225rem;
  line-height: 1;
  padding: 0 0.225rem;
  color: #1950c4;
  font-size: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}
.order .filter a:first-child {
  padding-left: 0;
}
.order .filter a:last-child {
  border-right: none;
}
.order .filter a.active {
  color: #fff;
  font-size: 0.25rem;
}
.order .data {
  display: flex;
  margin-top: 0.25rem;
}
.order .item {
  width: 50%;
}
.order h4 {
  font-size: 0.35rem;
  color: #fff;
  margin-bottom: 0.125rem;
}
.order span {
  display: block;
  color: #4c9bfd;
  font-size: 0.2rem;
}
/* 销售区域 */
.sales {
  height: 5.2rem;
}
.sales .caption {
  display: flex;
  line-height: 1;
}
.sales h3 {
  height: 0.225rem;
  padding-right: 0.225rem;
  border-right: 0.025rem solid #00f2f1;
}
.sales a {
  padding: 0.05rem;
  font-size: 0.2rem;
  margin: -0.0375rem 0 0 0.2625rem;
  border-radius: 0.0375rem;
  color: #0bace6;
}
.sales a.active {
  background-color: #4c9bfd;
  color: #fff;
}
.sales .inner {
  display: flex;
  flex-direction: column;
}
.sales .chart {
  flex: 1;
  padding-top: 0.1875rem;
  position: relative;
}
.sales .label {
  position: absolute;
  left: 0.525rem;
  top: 0.225rem;
  color: #4996f5;
  font-size: 0.175rem;
}
.sales .line {
  width: 100%;
  height: 100%;
  /* background-color: pink; */
}
/* 渠道分布以及季度销售模块 */
.wrap {
  display: flex;
}
.channel,
.quarter {
  flex: 1;
  height: 2.9rem;
}
.channel {
  margin-right: 0.25rem;
}
.channel .data {
  overflow: hidden;
}
.channel .data .radar {
  height: 2.1rem;
  width: 100%;
}
.channel h4 {
  color: #fff;
  font-size: 0.4rem;
  margin-bottom: 0.0625rem;
}
.channel small {
  font-size: 50%;
}
.channel span {
  display: block;
  color: #4c9bfd;
  font-size: 0.175rem;
}
/* 季度区块 */
.quarter .inner {
  display: flex;
  flex-direction: column;
  margin: 0 -0.075rem;
}
.quarter .chart {
  flex: 1;
  padding-top: 0.225rem;
}
.quarter .box {
  position: relative;
}
.quarter .label {
  transform: translate(-50%, -30%);
  color: #fff;
  font-size: 0.375rem;
  position: absolute;
  left: 50%;
  top: 50%;
}
.quarter .label small {
  font-size: 50%;
}
.quarter .gauge {
  height: 1.05rem;
}
.quarter .data {
  display: flex;
  justify-content: space-between;
}
.quarter .item {
  width: 50%;
}
.quarter h4 {
  color: #fff;
  font-size: 0.3rem;
  margin-bottom: 0.125rem;
}
.quarter span {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  color: #4c9bfd;
  font-size: 0.175rem;
}
/* 全国热榜模块制作 */
/* 排行榜 */
.top {
  height: 7rem;
}
.top .chart{
  height: 6rem;
  width: 5rem;
}
/* .top .inner {
  display: flex;
} */
.top h4 {
  margin-bottom: 0.15rem;
  font-size: 0.35rem;
  color: #fff;
}
/* .top .all {
  display: flex;
  flex-direction: column;
  width: 2.1rem;
  color: #4c9bfd;
  font-size: 0.175rem;
  vertical-align: middle;
} */
/* .top .all ul {
  padding-left: 0.15rem;
  margin-top: 0.15rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.top .all li {
  overflow: hidden;
}
.top .all [class^="icon-"] {
  font-size: 0.45rem;
  vertical-align: middle;
  margin-right: 0.15rem;
} */
/* .top .province {
  flex: 1;
  display: flex;
  flex-direction: column;
  color: #fff;
}
.top .province i {
  padding: 0 0.15rem;
  margin-top: 0.0625rem;
  float: right;
  font-style: normal;
  font-size: 0.175rem;
  color: #0bace6;
}
.top .province s {
  display: inline-block;
  transform: scale(0.8);
  text-decoration: none;
}
.top .province .icon-up {
  color: #dc3c33;
}
.top .province .icon-down {
  color: #36be90;
}
.top .province .data {
  flex: 1;
  display: flex;
  margin-top: 0.175rem;
}
.top .province ul {
  flex: 1;
  line-height: 1;
  margin-bottom: 0.175rem;
}
.top .province ul li {
  display: flex;
  justify-content: space-between;
}
.top .province ul span {
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.top .province ul.sup {
  font-size: 0.175rem;
}
.top .province ul.sup li {
  color: #4995f4;
  padding: 0.15rem;
}
.top .province ul.sup li.active {
  color: #a3c6f2;
  background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 0.15rem;
  background-color: rgba(10, 67, 188, 0.2);
}
.top .province ul.sub li {
  color: #52ffff;
  padding: 0.125rem 0.175rem;
} */
.clock {
  position: absolute;
  top: -0.45rem;
  right: 0.5rem;
  font-size: 0.25rem;
  color: #0bace6;
}
.clock i {
  margin-right: 5px;
  font-size: 0.25rem;
}
@media screen and (max-width: 1600px) {
  .top span {
    transform: scale(0.9);
  }
  .top .province ul.sup li {
    padding: 0.125rem 0.15rem;
  }
  .top .province ul.sub li {
    padding: 0.0625rem 0.15rem;
  }
  .quarter span {
    transform: scale(0.9);
  }
}

</style>
